import React, { useEffect, useState } from 'react'
import { Input, Button, NavBar,Toast } from 'react-vant';
import { useNavigate } from 'react-router-dom';
import s from './style.module.less'
import cx from 'classnames'
import axios from '@/utils/axios';
import { useStore, observer } from '@/store'

function Login() {
    const navigate = useNavigate()
    const { userStore } = useStore()
    const [tel, setTel] = useState('')
    const [password, setPassword] = useState('')
    const [passwordAgain,setPasswordAgain]= useState('')
    const [name, setName] = useState('login')
    const [isLogin,setIsLogin] = useState('false')
    const [nickname,setNickname] = useState('')
    useEffect(()=>{
        console.log(isLogin);
    },[isLogin])

    const goBack = () => {
        navigate(-1)
    }
    const loginIn = async () => {   // 登录函数
        console.log(tel,password,passwordAgain,'输入');
        if(!tel){
            Toast.info('请输入账号！')
            return 
        }else if(!password){
            Toast.info('请输入账号密码！')
            return 
        }
        // 如果此时为登录
        if(name === 'login'){    
           await axios.post('/user/login',{
            phone:tel,
            password:password
           }).then(res=>{
            console.log(res,'res');
            if (res.data.data) {
                Toast.info('登陆成功！')
                localStorage.setItem('token',JSON.stringify(res.data.data))
                userStore.changeLogin(res.data.data)
                navigate('/')
            } else {
                Toast.info('账号或密码错误')
            }
           })
          
        }else{  // 如果此时为注册
            if(!password || !passwordAgain || !tel){
                Toast.info('账号或密码不能为空！')
            }else if(password !== passwordAgain){
                Toast.info('两次密码不一致')
            }else{
                let res = await axios.post('/user/regist',{
                   name:nickname,
                   phone:tel,
                   password,
                   role:0
                })
                if (res.data.user) {
                    localStorage.setItem('token',JSON.stringify(res.data.user))
                    navigate('/')
                    Toast.info('注册成功，已自动登录')
                }
                console.log(res,'注册res');
            }
        }
      
    
    }
    return (
        <div className={s.main}>
            <NavBar
                title="登录"
                onClickLeft={() => goBack()}
            />
            <div className={s.img}>
                <img src="https://tse4-mm.cn.bing.net/th/id/OIP-C.8ZNNBC1uL-3n9aKEAdpoMgHaCp?w=323&h=125&c=7&r=0&o=5&dpr=1.1&pid=1.7" alt="" />
            </div>
            <div className={s.title}>
                <div className={cx({ [s.name]: true, [s.active]: name === 'login' })} onClick={() => setName('login')}>登录</div>
                <div className={cx({ [s.name]: true, [s.active]: name === 'register' })} onClick={() => setName('register')}>注册</div>
            </div>
            <div className={cx({
                [s.hidden]:name === 'login',
                [s.box]:true
            })}>
                <div className={s.left}>昵称：</div>
                <div className={s.right}>
                    <Input
                        value={nickname}
                        type='tel'
                        onChange={nickname => setNickname(nickname)}
                        placeholder='请输入昵称'
                    />
                </div>

            </div>
            <div className={s.box}>
                <div className={s.left}>账号：</div>
                <div className={s.right}>
                    <Input
                        value={tel}
                        type='tel'
                        onChange={tel => setTel(tel)}
                        placeholder='请输入手机号'
                    />
                </div>

            </div>
            <div className={s.box}>
                <div className={s.left}>密码：</div>
                <div className={s.right}>
                    <Input
                        value={password}
                        type='password'
                        onChange={password => setPassword(password)}
                        placeholder='请输入密码'
                    />
                </div>

            </div>
            <div className={cx({[s.box]:true,[s.hidden]:name === 'login'})}>
                <div className={s.left}>密码：</div>
                <div className={s.right}>
                    <Input
                        value={passwordAgain}
                        type='password'
                        onChange={passwordAgain => setPasswordAgain(passwordAgain)}
                        placeholder='请再次输入密码'
                    />
                </div>

            </div>
            <div className={s.button}>
                <Button type='primary' size='large' onClick={()=>loginIn()}>
                    {name === 'login' ? '登录' : '注册'}
                </Button>
            </div>
        </div>
    )
}

export default observer(Login)